<template>
    <div class="trauma-process">
        <el-form inline>
            <el-radio v-model="radioDate" label="1" @change="changeDate">
                <span style="margin-right: 5px;">指定日期</span>
                <el-form-item label="年份：">
                    <el-date-picker v-model="year" type="year" value-format="yyyy" size="mini" :disabled="radioDate == 2"
                        placeholder="选择年" />
                </el-form-item>
                <el-form-item label="季度：">
                    <el-select v-model="quarter" size="mini" placeholder="请选择" :disabled="radioDate == 2">
                        <el-option label="第一季度" :value="1" />
                        <el-option label="第二季度" :value="2" />
                        <el-option label="第三季度" :value="3" />
                        <el-option label="第四季度" :value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item label="月份：">
                    <el-select v-model="month" size="mini" placeholder="请选择" :disabled="radioDate == 2">
                        <el-option label="一月" :value="1" :disabled="quarter != '' && quarter != '1'" />
                        <el-option label="二月" :value="2" :disabled="quarter != '' && quarter != '1'" />
                        <el-option label="三月" :value="3" :disabled="quarter != '' && quarter != '1'" />
                        <el-option label="四月" :value="4" :disabled="quarter != '' && quarter != '2'" />
                        <el-option label="五月" :value="5" :disabled="quarter != '' && quarter != '2'" />
                        <el-option label="六月" :value="6" :disabled="quarter != '' && quarter != '2'" />
                        <el-option label="七月" :value="7" :disabled="quarter != '' && quarter != '3'" />
                        <el-option label="八月" :value="8" :disabled="quarter != '' && quarter != '3'" />
                        <el-option label="九月" :value="9" :disabled="quarter != '' && quarter != '3'" />
                        <el-option label="十月" :value="10" :disabled="quarter != '' && quarter != '4'" />
                        <el-option label="十一月" :value="11" :disabled="quarter != '' && quarter != '4'" />
                        <el-option label="十二月" :value="12" :disabled="quarter != '' && quarter != '4'" />
                    </el-select>
                </el-form-item>
            </el-radio>
            <el-radio v-model="radioDate" label="2" @change="changeDate">
                <span style="margin-right: 5px;">其他时间</span>
                <el-form-item label="">
                    <el-date-picker v-model="monthRange" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份"
                        size="mini" format="yyyy-MM" value-format="yyyy-MM" :disabled="radioDate == 1" />
                </el-form-item>
            </el-radio>
            <el-form-item label="">
                <el-button type="primary" size="mini" @click="search">搜索</el-button>
                <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="trauma-process_content">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>填报情况数据统计</span>
                    <el-popover placement="bottom" title="说明" width="400" trigger="hover">
                        <div>考核对象：</div>
                        <div>已建档病例</div>
                        <div>数据取值：</div>
                        <div>1.各项取值：</div>
                        <div>创伤病例：已建档病例总数</div>
                        <div>严重创伤病例：创伤评估”中ISS评分≥16或单部位损伤AIS最大值 ≥3的病例数量</div>
                        <div>MPDS数据：已填写MPDS症状的病例数量</div>
                        <div>生命体征数据：已填写“生命体征”的病例数量</div>
                        <div>TI评分记录：已填写“TI评分”的病例数量</div>
                        <div>GCS评分记录：已填写“GCS评分”的病例数量</div>
                        <div>ISS评分记录：已填写“ISS评分”的病例数量</div>
                        <div>门诊ID录入：已填写“门诊ID”的病例数量</div>
                        <div>2.完成率=该项数值/已建档病例总数*100%</div>
                        <div>3.按月统计，1个病例计1例，同一类数据有多条记录时，不重复计算</div>
                        <div>查询筛选：</div>
                        <div>时间-年份、季度、月份；</div>
                        <div>默认显示本年</div>
                        <i slot="reference" class="el-icon-info" style="color: #42cece;" />
                    </el-popover>
                </div>
                <el-table :data="transData" stripe border header-align="left">
                    <el-table-column v-for="(item, index) in transTitle" :key="index" :label="item" align="center"
                        :show-header="false">
                        <template #default="scope">
                            <span>{{ scope.row[index] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>填报数量趋势图</span>
                    <el-popover placement="bottom" title="说明" width="400" trigger="hover">
                        <div>考核对象：</div>
                        <div>填报完成的病例</div>
                        <div>数据取值：</div>
                        <div>1.“转归”中填写了转院、出院、离院、死亡转归信息的病例</div>
                        <div>2.X轴为本年12个月，Y轴为数量，曲线图展示</div>
                        <div>3.按月统计，1个病例计1例，无重复计算</div>
                        <div>查询筛选：</div>
                        <div>时间-年份、季度、月份；</div>
                        <div>默认显示本年</div>
                        <i slot="reference" class="el-icon-info" style="color: #42cece;" />
                    </el-popover>
                </div>
                <div class="dignosis-content" style="position: relative;">
                    <div style="position: absolute; left: 45%; top: -1%;line-height: 36px; z-index: 999;">

                    </div>
                    <div id="getFinishedQtyTrend" class="treatment-process-card" />
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
import {
    getFirstgetFillingQtyAidMeasureQty,
    getFinishedQtyTrend
} from '@/api/statistical/statisticTruma'
export default {
    data() {
        return {
            radioDate: '1',
            year: '',
            quarter: '',
            month: '',
            monthRange: [],
            tableInData: [],
            listData: [],
            origintitle: [
                '数量',
                '完成率'
            ],
            transTitle: [],
            transData: []
        }
    },
    mounted() {
        this.initApi()
    },
    methods: {
        search() {
            this.initApi()
        },
        reset() {
            this.radioDate = '1'
            this.year = ''
            this.quarter = ''
            this.month = ''
            this.monthRange = []
            this.initApi()
        },
        changeDate(val) {
            console.log(val)
            if (val == 1) {
                this.monthRange = []
            } else if (val
                == 2) {
                this.year = ''
                this.quarter = ''
                this.month = ''
            }
        },
        initApi() {
            this.traumaGetFirstgetFillingQtyAidMeasureQty()
            this.traumaGetFinishedQtyTrend()
        },
        notHaveData(chart) {
            chart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#000', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
            })
        },
        traumaGetFirstgetFillingQtyAidMeasureQty() {
            this.transData = []
            this.listData = []
            this.transTitle = []
            this.tableInData = []
            getFirstgetFillingQtyAidMeasureQty({
                hospitalId: this.$store.getters.hospitalId,
                year: this.year,
                quarter: this.quarter,
                month: this.month,
                startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
                endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
            }).then(res => {
                if (res.code == 0) {
                    console.log(res.data)
                    if (res.data) {
                        if (res.data.fillingQties && res.data.fillingQties.length > 0) {
                            this.tableInData = res.data.fillingQties
                            let obj = []
                            this.transTitle.push('')
                            this.tableInData.map(item => {
                                this.transTitle.push(item.itemName)
                                obj.push({
                                    itemQty: item.itemQty,
                                    itemRatio: item.itemRatio
                                })
                            })
                            this.listData = obj

                            // 对象转成数组
                            let matrixData = this.listData.map((row) => {
                                let arr = []
                                for (let key in row) {
                                    arr.push(row[key])
                                }
                                return arr
                            })
                            // 加入标题拼接最终的数据
                            // 顺序一致
                            this.transData = matrixData[0].map((col, i) => {
                                return [this.origintitle[i], ...matrixData.map((row) => {
                                    return row[i]
                                })]
                            })
                        }

                        console.log(this.tableInData)
                    }
                }

            })
        },
        traumaGetFinishedQtyTrend() {
            let chartDom = document.getElementById('getFinishedQtyTrend');
            let myChart = echarts.init(chartDom);
            myChart.clear()
            myChart.hideLoading()
            window.addEventListener('resize', myChart.resize)
            getFinishedQtyTrend({
                hospitalId: this.$store.getters.hospitalId,
                year: this.year,
                quarter: this.quarter,
                month: this.month,
                startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
                endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
            }).then(res => {
                if (!res.data) {
                    this.notHaveData(myChart)
                    return
                }
                if (res.data.finishedQties.length === 0) {
                    this.notHaveData(myChart)
                    return
                }

                let timeLine = []
                let finishedQty_list = []
                res.data.finishedQties.forEach(el => {
                    timeLine.push(el.year + "-" + el.month)
                    finishedQty_list.push(el.finishedQty)
                });
                let option = {
                    color: ['#027DB4'],
                    title: {
                        text: '',
                        subtext: '',
                        left: 'center'
                    },
                    xAxis: {
                        name: '',
                        type: 'category',
                        data: timeLine
                    },
                    yAxis: {
                        name: '(例)',
                        type: 'value'
                    },
                    series: [
                        {
                            data: finishedQty_list,
                            type: 'line',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            smooth: true
                        }
                    ]
                }
                myChart.setOption(option)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.trauma-process {
    width: 100%;
    height: 100%;

    &_content {
        height: calc(100% - 59px);
        overflow-y: auto;
    }

    .dignosis-content {
        width: 100%;
        height: 400px;
        display: inline-block;

        .dignosis-style {
            display: inline-block;
            width: 50%;
            height: 100%;
        }
    }

    .treatment-process-card {
        height: 400px;
    }

    .box-card+.box-card {
        margin-top: 5px;
    }

    /deep/.el-radio__label {
        line-height: 38px;
    }
}
</style>